<template>
  <div>
    <Header />
    <div id="body">
      <Map />
      <Menu :selectType="type" />
      <div id="menuLeft">
        <span @click="type='area'">区域</span>
        <span @click="type='graphic'">图斑</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Map from "./components/Map.vue";
import Header from "./components/header.vue";
import Menu from "./components/dataSearchMenu.vue";
@Component({
  components: {
    Map,
    Header,
    Menu,
  },
})
export default class extends Vue {
  type = "area";
}
</script>

<style scoped lang='less'>
#body {
  height: calc(100vh - 70px);
  position: relative;
  #menuLeft {
    position: absolute;
    top: 0;
    right: 400px;
    width: 22px;
    text-align: center;
    word-break: break-all;
    background-color: #fff;
    span {
      display: inline-block;
      width: 100%;
      margin-top: 4px;
      cursor: pointer;
      border: 1px solid #000;
    }
  }
  /* display: flex; */
}
</style>